<template>
  <div class="title">忘记密码</div>
  <van-form autocomplete="off">
    <van-field class="formOperation" v-model="formData.mobile" name="手机号" placeholder="请输入手机号码"
      :rules="[{ required: false, message: '请输入手机号码' }]" />
    <van-field v-model="formData.verificationCode" type="numer" name="验证码" placeholder="请输入验证码">
      <template #right-icon>
        <span class="solts">
          <van-button type="primary" class="getCodeClass" @click="getImgcode" :disabled="!!formData.counter">
            {{ formData.sendBtnText }}</van-button>
        </span>
      </template>
    </van-field>
    <van-field v-model="formData.pwd" :type="formData.passwordType" name="设置密码" placeholder="密码（8~16位字符)"
      :rules="[{ required: false, message: '请输入密码  ' }]">
      <template #right-icon>
        <span class="solts" @click="switchPasswordType(0)">
          <van-icon name="eye" v-if="formData.passwordType === 'password'" />
          <van-icon name="closed-eye" v-else />
        </span>
      </template>
    </van-field>
    <van-field v-model="formData.repwd" :type="formData.repasswordType" name="再次输入密码" placeholder="再次输入密码"
      :rules="[{ required: false, message: '请输入密码  ' }]">
      <template #right-icon>
        <span class="solts" @click="switchPasswordType(1)">
          <van-icon name="eye" v-if="formData.repasswordType === 'password'" />
          <van-icon name="closed-eye" v-else />
        </span>
      </template>
    </van-field>
    <van-checkbox v-model="formData.checked" checked-color="#37dc6d" class="policy">
      <div class="isAggressDiv">
        我已阅读并同意
        <span @click="openAgreement(1)">《用户协议》</span>
        <span @click="openAgreement(2)">《隐私政策》</span>
      </div>
    </van-checkbox>

    <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="onSubmit">确定</van-button>
  </van-form>

  <!-- 图像验证码 -->
  <div v-if="formData.imgcodeShow" class="imgcode">

    <div class="warp">
      <van-icon name="close" @click="close" class='close' />
      <h1>请输入图像验证码</h1>
      <div class="flex">
        <img :src="formData.img" alt="">
        <van-cell-group inset>
          <van-field v-model="formData.imgcode" required placeholder="请输入验证码" />
        </van-cell-group>

      </div>
      <van-button type="primary" class="block_gradual" :loading="formData.loading" @click="GetCode">确定</van-button>
    </div>
  </div>
  <privacy-policy :agreementData="agreementData" />
</template>
<script>
import { defineComponent, reactive, computed, ref, onMounted, nextTick, activated } from 'vue'
import { Toast } from "vant";
import { useRouter } from 'vue-router'
import { setLocal } from "@/utils/localStorage";
import { loginByPhone, getCode, imgcode, resetPassword } from "@/api/user";
import { processDev } from '@/utils/env'
import privacyPolicy from '@/components/privacyPolicy'
export default defineComponent({
  components: {
    privacyPolicy
  },
  setup() {
    const router = useRouter()
    const formData = reactive({
      mobile: "",
      repwd: "",
      pwd: "",
      checked: true,
      counter: 0,
      sendBtnText: "获取验证码",
      loading: false,
      imgcodeShow: false,
      imgcode: '',
      img: '',
      uuid: '',
      resetShow: true,
      passwordType: "password",
      repasswordType: "password",
      verificationCode: ''
    })
    // const resetShow = ref(true)
    const resetSubmit = () => {

    }

    const agreementData = reactive({
      status: false,
      type: 1
    })
    const openAgreement = (type) => {
      agreementData.status = true
      agreementData.type = type
    }
    onMounted(() => {
      nextTick(() => {
      })

    })
    const switchPasswordType = (val) => {

      if (val == 0) {
        formData.passwordType = formData.passwordType === 'password' ? 'text' : 'password'
      } else if (val == 1) {
        formData.repasswordType = formData.repasswordType === 'password' ? 'text' : 'password'
      }

    }
    const resetbtn = () => {
      if (!formData.mobile || !formData.verificationCode) {
        Toast("请填写完整信息");
        return
      }
      formData.resetShow = !formData.resetShow

    }
    const close = () => {
      formData.imgcodeShow = false
    }
    const getImgcode = () => {
      if (formData.mobile === '') {
        Toast('请填写手机号');
        return
      }

      imgcode().then(res => {
        console.log(res)
        if (res.data.success) {
          formData.imgcodeShow = true
          formData.img = res.data.data.img
          formData.uuid = res.data.data.uuid
        } else {
          formData.imgcodeShow = false

        }

      })
    }
    const GetCode = async () => {
      const data = { mobile: formData.mobile, type: 2, uuid: formData.uuid, verificationCode: formData.imgcode }
      Toast.loading({
        duration: 0,
        forbidClick: true
      });

      getCode(data).then(res => {
        console.log(res)
        if (!res.data.success) {
          getImgcode()

          Toast.fail(res.data.message);

        } else {
          formData.imgcodeShow = false
          Toast.clear();
          formData.counter = 60
          formData.sendBtnText = `(${formData.counter}秒)后重新发送`
          const timer = setInterval(() => {
            formData.counter--
            formData.sendBtnText = `(${formData.counter}秒)后重新发送`
            if (formData.counter <= 0) {
              formData.sendBtnText = "获取验证码"
              clearInterval(timer)
            }
          }, 1000)
        }

      })
    }
    const onSubmit = () => {
      if (!formData.pwd) {
        return Toast("请输入密码");
      }
      if (formData.pwd.length <= 7 || formData.pwd.length <= 7) {
        return Toast("请输入8-20位密码");
      }
      if (formData.repwd != formData.pwd) {
        return Toast("两次密码不一致");
      }
      if (!formData.checked) {
        Toast("请勾选我已阅读并同意《用户协议》《隐私政策》");
        return
      }


      formData.loading = true

      const data = {
        mobile: formData.mobile,
        verificationCode: formData.verificationCode,
        password: formData.pwd,
      }
      resetPassword(data).then(res => {
        if (res.data.success) {
          //   var token = res.data.data.token;
          //   setLocal("token", token)
          Toast(res.data.message)

          router.push('/login')
        } else {
          Toast(res.data.message);
          formData.pwd = ''
          formData.repwd = ''

        }
        formData.loading = false
      })
    }
    const isApp = computed(() => {
      return processDev
    })
    return {
      switchPasswordType,
      resetbtn,
      resetSubmit,
      getImgcode,
      formData,
      GetCode,
      onSubmit,
      isApp,
      close,
      openAgreement, agreementData
    }
  },
})
</script> 
<style lang="less" scoped>
.policy {
  position: fixed;
  bottom: 50px;
  display: flex;
  align-items: center;

  &:deep(.van-checkbox__icon) {
    width: 24px;
    height: 24px;
    font-size: 24px !important;
    line-height: 40px;
    margin-block: 5px;
  }

  .van-checkbox {
    margin-top: 60px;
  }
}

.title {
  font-size: 36px;
  color: #ffffff;
  line-height: 48px;
  margin: 100px 60px 0px;
}

.van-form {
  margin-top: 60px;
  padding: 0 60px;

  .getCodeClass {
    height: 56px;
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    font-size: 28px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
    border-radius: 28px;
    border: none;
  }

  .van-row {
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
    line-height: 48px;
  }

  .van-checkbox {
    margin-top: 60px;

    &:deep(.van-checkbox__icon) {
      width: 26px;
      height: 26px;
      font-size: 26px;
    }

    .isAggressDiv {
      font-size: 28px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);

      span {
        font-size: 28px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #37dc6d;
        background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .block_gradual {
    margin-top: 20px;
  }

  .download {
    display: block;
    margin-top: 30px;
    width: 100%;
    height: 92px;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #ffffff;
    opacity: 0.9;
    background: transparent;
    border-radius: 46px;
    border: 1px solid rgba(180, 132, 87, 1);

    span {
      font-size: 24px;
    }
  }
}

.imgcode {
  width: 90%;
  background: rgba(0, 0, 0, 0.8);
  height: 80vh;
  position: fixed;
  top: 0;
  left: 5%;
  padding-top: 4rem;

  .block_gradual {
    margin: 0.6rem 0px;
  }

  h1 {
    font-size: 36px;
    text-align: center;
  }

  .warp {
    position: relative;
    background: white;
    padding: 5%;
    border-radius: 8px;

    .close {
      position: absolute;
      font-size: 0.7rem;
      right: 3%;
      top: 3%;
    }

    .flex {
      margin-top: 0.5rem;
      display: flex;

      &:deep(.van-field) {
        border: solid 1px #8c8a8a;
        border-radius: 4px;
        background: transparent;
      }

      &:deep(.van-field__control) {
        font-size: 26px;
        color: #000000;
      }
    }
  }
}
</style>